<!DOCTYPE html>
<html lang="en">
<head prefix="og: http://ogp.me/ns#">
    <meta charset="UTF-8">
    <title>Coolface</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <meta name="msapplication-tap-highlight" content="no">

    <meta property="og:type" content="website">
    <meta property="og:title" content="coolface">
    <link rel="stylesheet" href="./css/style_3d.css">
</head>
<body>
<!-- Music -->

<audio id="music" src="" controls="controls" loop preload="auto" style="position: absolute;z-index: 100;display: none;">
    <!--<source src="http://youdoneed-test.oss-cn-shenzhen.aliyuncs.com/164xjoropo7ugnqy4ak1.mp3" >-->
    Your browser does not support the audio element.
</audio>
<!-- Music -->
<div id="sway">

    <canvas id="swayCanvas">
        Your browser does not support Canvas！
    </canvas>

</div>

<!--Guide-->
<div id="guideContainer">
    <div style="width: 290px; height: 110px; border-radius: 2px; display: flex; justify-content: center;align-items: center;" class="linear-gradient">
        <img id="loadingPhone"/>
        <span id="loadingTip"></span>
    </div>
</div>
<!--Guide-->

<!-- Topic -->
<!-- <div id="topic" class="linear-gradient-shade">

    <div class="user-info-panel">
        <span class="show-id">@yjl2010</span>
    </div>

    <div style="width: 101px; height: 55px; float: right">
        <img class="watermark" src="/lib/images/landing_v2/watermark.png" alt="">
    </div>
</div> -->
<!-- Topic -->

<!-- Cover -->
<div id="loadingContainer">
    <!-- <img id="loadingFrame" src="
        https://s3.amazonaws.com/overseas-sway-img-release/FmaDLIFOnCs0mOH7ScfziF-QJktd.mp4-1.jpg    "/>
    <div id="loadingDiv" class="linear-gradient">
        <span id="loadingTip"></span>
        <div style="margin-top: 232px;">
            <img style="width: 121px; height: 20px;" src="/lib/images/landing_v2/loading_logo.png">
        </div>
        <span class="loading-show-id">@yjl2010</span>
    </div> -->
</div>
<!-- Cover -->

<!-- SliderHorizontal -->
<div id="sliderHorizontalContainer">
    <div id="downloadProcessHorizontal"></div>
    <div id="sliderHorizontal" style="left: 0;"></div>
</div>
<!-- SliderHorizontal -->

<!-- SliderVertical -->
<div id="sliderVerticalContainer">
    <div id="downloadProcessVertical"></div>
    <div id="sliderVertical" style="bottom: 0; "></div>
</div>
<!-- SliderVertical -->

<!-- Loop -->
<!--<div class="loop-container">-->
    <!--<img id="loopImg" style="width: 22px; height: 34px;" src="">-->
    <!--<span id="loop">423</span>-->
<!--</div>-->
<!-- Loop -->

<!-- Download -->
<div id="download">
    <div style="width: 100%; height: 246px;">
        <div style="display: flex; justify-content: center; margin-bottom: 30px;">
            <!--<img style="width: 179px; height: 166px;" src="/lib/images/landing_v2/logo.png">-->
        </div>

        <div style="display: flex; justify-content: center;">
            <div id="downloadButton" class="linear-gradient">
            <span id='platform_icon'>
                <!-- <img style="width: 18px; height: 22px;" src="/lib/images/landing_v2/download_ios.png"> -->
            </span>
                <span class="download-text">下载coolface</span>
            </div>
        </div>

    </div>
</div>
<!-- Download -->

<div id="initCover" class="linear-gradient"></div>

<script type="text/javascript">

     document.addEventListener("touchmove",function(e){
         e.preventDefault();
         e.stopPropagation();
     },false);

    // var cdnDomain = 'https://s3.amazonaws.com/overseas-sway-img-release/';
    // var imageNum = 67;
    // var imagePrefix = 'FmaDLIFOnCs0mOH7ScfziF-QJktd.mp4';
    // var directionX = 1;
    // var directionY = 0;
    // var initLoop = 423;
    // var user_id = '13526229348c327e2e9b2723727a022a';

    var cdnDomain = 'http://youdoneed-test.oss-cn-shenzhen.aliyuncs.com/';
    var imageNum = GetQueryString('length');
    var imagePrefix = GetQueryString('id');
    var directionX = 1;
    var directionY = 0;
    var initLoop = 423;
//    var user_id = '13526229348c327e2e9b2723727a022a';

    document.getElementById("swayCanvas").style.backgroundImage = "url('http://youdoneed-test.oss-cn-shenzhen.aliyuncs.com/"+ GetQueryString('id') +"-1.jpg')";
    document.getElementById("swayCanvas").style.backgroundSize = 'cover';
//    var audio = document.getElementById("music");
//     audio.src = GetQueryString('musicUrl');
//     alert(audio.src)
//     audio.play();

     //--创建页面监听，等待微信端页面加载完毕 触发音频播放
     document.addEventListener('DOMContentLoaded', function () {
         function audioAutoPlay() {
             var audio = document.getElementById('music');
             audio.src = GetQueryString('musicUrl');
             audio.play();
             document.addEventListener("WeixinJSBridgeReady", function () {
                 audio.play();
             }, false);
         }
         audioAutoPlay();
     });
     //--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
     var isPlaying = true;
     document.addEventListener('touchstart', function () {
         function audioAutoPlay() {
             var audio = document.getElementById('music');
             audio.src = GetQueryString('musicUrl');
             audio.play();
         };
         if(isPlaying) {
             audioAutoPlay();
         }
         isPlaying = false;
     });

     function GetQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }

</script>
<script src="./js/landing.js"></script>
</body>
</html>